<template>
  Draft
  <el-table :data="DraftsData" style="width: 100%">
    <el-table-column fixed prop="id" label="ID" width="150" />
    <el-table-column prop="title" label="Title" width="150" />
    <el-table-column prop="Author" label="Author" width="150" />
    <el-table-column prop="AuthorID" label="AuthorID" width="150" />
    <el-table-column prop="type" label="Type" width="150" />
    <el-table-column prop="CreationDate" label="CreationDate" width="150" />
    <el-table-column prop="LastUpdate" label="LastUpdate" width="150" />
    <el-table-column prop="likeCount" label="LikeCount" width="150" />
    <el-table-column prop="commentsCount" label="CommentsCount" width="150" />
    <el-table-column prop="shareCount" label="ShareCount" width="150" />
    <el-table-column fixed="right" label="Edit" width="65">
      <el-button link type="primary" size="small">Edit</el-button>
    </el-table-column>
    <el-table-column fixed="right" prop="id" label="Delete" width="65">
      <template #default="scope">
        <el-popconfirm title="确定要删除该草稿吗?" @confirm="deleteThisDraft(scope.row.id)">
          <template #reference>
            <el-button link type="danger" size="small">Delete</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { deleteDraft, getDraft_all } from '../../api/api';

// 文章列表
const DraftsData = ref([])

// 删除草稿
const deleteThisDraft = (id) => {
  deleteDraft().then(response => {
    getDraftsData() // 从服务器重新获取文章列表
    ElNotification({
      title: '删除成功',
      message: id + ' 已删除',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '删除失败',
      message: error.message,
      type: 'error'
    })
  })
}

// 获取文章列表
const getDraftsData = () => {
  getDraft_all().then(response => {
    DraftsData.value = response.data
  }).catch(error => console.log(error))
}
getDraftsData()
</script>

<style scoped></style>